export const mixin = {
  data() {
    return {
      baseUrl: import.meta.env.VITE_APP_BASE_API, // 根地址
      // 顶部按钮是否禁用（当前只针对删除）
      disabled: true,
      // 表格多选数组
      selection: [],
      // 表格多选id数组
      ids: [],
      // 是否分页
      isPage: true,
      // 是否需要在mixin初始化
      isCreated: true,
      // 是否需要在mixin挂载
      isMounted: true,
      // 查询对象
      queryForm: {},
      totalPage: 0, // 总数
      loading: false, // 加载开关
      height: 0, // 表格高度
      data: [], // 表格数据
      // 当前页面api函数对象
      funs: this.$store.state.settings.funs,
      // 顶部表单按钮组
      options: [{
        type: 'button',
        icon: 'el-icon-refresh',
        handler: 'handlerRefresh',
        float: 'left',
        class: 'refreshBtn',
        text: '刷新'
      },
      {
        type: 'button',
        icon: 'el-icon-plus',
        handler: 'handlerSave',
        float: 'left',
        btnType: 'primary',
        permission: 'create',
        text: '新增'
      },
      {
        type: 'button',
        icon: 'el-icon-upload2',
        handler: 'handlerUpload',
        float: 'left',
        permission: 'import',
        text: '导入'
      },
      {
        type: 'button',
        icon: 'el-icon-download',
        handler: 'handlerExport',
        permission: 'export',
        btnType: 'info',
        float: 'left',
        text: '导出'
      },
      {
        type: 'button',
        icon: 'el-icon-delete',
        handler: 'handlerDels',
        class: 'deleteBtn',
        permission: 'batch:del',
        text: '删除',
        float: 'left'
      },
      {
        type: 'button',
        handler: 'handlerAdvanced',
        class: 'refreshBtn',
        permission: 'page',
        advanced: true,
        float: 'right',
        text: '高级查询'
      },
      {
        type: 'button',
        handler: 'handlerReset',
        float: 'right',
        class: 'infoBtn',
        text: '重置'
      },
      {
        type: 'button',
        handler: 'handlerQuery',
        permission: 'page',
        float: 'right',
        text: '查询',
        btnType: 'primary'
      },
      {
        type: 'search',
        bindValue: '',
        permission: 'page',
        float: 'right',
        label: 'keyword',
        handler: 'handlerQuery',
        placeholder: '输入关键字搜索'
      }
      ],
      // 高级查询开关
      advanced: false
    }
  },
  computed: {
    // 页面布局大小
    size() {
      return this.$store.state.app.size
    }
  },
  created() {
    if (this.isCreated) {
      // 若使用分页默认加上分页字段
      if (this.isPage) {
        this.queryForm = {
          pageNum: 1,
          pageSize: 10
        }
      }
      this.getList()
      this.getLayout()
    }
  },
  mounted() {
    if (this.isMounted) {
      var that = this
      // <!--把window.onresize事件挂在到mounted函数上-->
      window.onresize = () => {
        return (() => {
          that.getLayout()
        })()
      }
    }
  },
  methods: {
    // 动态布局
    getLayout() {
      this.$nextTick(() => {
        this.height = document.documentElement.clientHeight - (125 + (this.$refs.commonForm ? this.$refs.commonForm.$el.offsetHeight * 2 : 0))
        if (this.$refs.table) this.$refs.table.$refs.refTable.doLayout()
      })
    },
    // 获取列表数据
    getList() {
      this.loading = true
      this.funs['list'](this.queryForm).then((res) => {
        // 时间段筛选实现，需要注意⚠️几个关键字 startTime、endTime、createTime
        if ('startTime' in this.queryForm && this.queryForm.startTime &&
          'endTime' in this.queryForm && this.queryForm.endTime) {
          this.queryForm.createTime = [this.queryForm.startTime, this.queryForm.endTime]
        }
        this.data = res.data.records
        this.totalPage = res.data.total
      }).finally(() => {
        this.loading = false
      })
    },
    // table组件按钮返回函数
    handlerClick(item) {
      const Function = this[item.handler]
      Function()
    },
    // 导入
    handlerUpload() {
      this.$refs.toChannel.dialogVisible = true
    },
    // 刷新
    handlerRefresh() {
      this.getList()
    },
    // 查询
    handlerQuery() {
      const row = this.options.find((item) => item.type === 'search')
      this.queryForm[row.label] = row.bindValue
      if (this.queryForm.pageNum) this.queryForm.pageNum = 1
      if ('createTime' in this.queryForm && this.queryForm.createTime) {
        this.queryForm.startTime = new Date(this.queryForm.createTime[0]).getTime()
        this.queryForm.endTime = new Date(this.queryForm.createTime[1]).getTime()
        this.queryForm.createTime = []
      } else {
        delete this.queryForm.startTime
        delete this.queryForm.endTime
      }
      this.getList()
    },
    // 重置
    handlerReset() {
      this.options.find((item) => item.type === 'search').bindValue = ''
      if (this.queryForm.pageNum) {
        this.queryForm = {
          pageNum: 1,
          pageSize: this.queryForm.pageSize
        }
      } else {
        this.queryForm = {}
      }
      this.getList()
    },
    // 高级查询
    handlerAdvanced() {
      this.advanced = !this.advanced
    },
    // 打开保存弹窗
    handlerSave(item) {
      this.$refs.addOrUpdate.openDialog(item)
    },
    // 打开详情弹窗
    handlerDetail(item) {
      this.$refs.detail.openDialog(item)
    },
    // 导出
    handlerExport() {
      this.loading = true
      this.funs['exports'](this.queryForm).then(res => {
        this.$download(res.data, this.$route.meta.title.replace('管理', '') + '信息列表.xlsx')
        this.$message({ type: 'success', message: '导出成功!' })
      }).finally(() => {
        this.loading = false
      })
    },
    // 多选删除
    handlerDels() {
      this.handlerDel(this.funs['batchDel'])
    },
    // 删除
    handlerDel(del, item) {
      const id = item ? item.id : this.ids
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.loading = true
        del(id).then(() => {
          this.$message({ type: 'success', message: '删除成功!' })
          this.getList(item)
          if (this.ids.length) this.disabled = false
        }).finally(() => {
          this.loading = false
        })
      }).catch(() => {})
    },
    // 每页显示多少条改变事件
    handleSizeChange(val) {
      this.queryForm.pageSize = val
      this.getList()
    },
    // 当前页发生改变事件
    handleCurrentChange(val) {
      this.queryForm.pageNum = val
      this.getList()
    },
    // 多选改变事件
    handleSelectionChange(e) {
      const ids = e.map((item) => item.id)
      this.selection = e
      this.ids = ids
      let flag = true
      this.options.forEach(row => {
        if ('disabled' in row) {
          row['disabled'] = !this.ids.length
          flag = false
        }
      })
      if (flag) this.disabled = !this.ids.length
    }
  }
}
